<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>个人中心</title>
<link rel="stylesheet" href="<%=basePath %>layui/css/layui.css">
<script src="<%=basePath %>layui/layui.js"></script>
</head>
<body>
	<h1>个人中心</h1>
	<hr>
	
	
<form class="layui-form layui-form-pane" onsubmit="return false" style="margin-left: 120px;">
<input type="hidden" name="id" value="${userInfo.id }"/>

  <div class="layui-form-item" pane style="width: 500px;">
    <label class="layui-form-label">姓名</label>
    <div class="layui-input-inline">
      <input type="text" id="nameVerify" name="name" lay-verify="required|nikename" value="${userInfo.name }" placeholder="请输入姓名" autocomplete="off" class="layui-input">
    </div>
    <div id="name_style" class="layui-form-mid layui-word-aux">
         *
    </div>
  </div>
  
  <div class="layui-form-item" pane style="width: 500px;">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-inline">
      <input type="password" id="E_pass" name="loginPassword" lay-verify="required|pass" value="${userInfo.loginPassword }" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item" pane style="width: 500px;">
    <label class="layui-form-label">确认密码</label>
    <div class="layui-input-inline">
      <input type="password" id="E_repass" lay-verify="required|repass" value="${userInfo.loginPassword }" placeholder="请输入确认密码" autocomplete="off" class="layui-input">
    </div>
  </div>

  <div class="layui-form-item" pane style="width: 500px;">
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-inline" >
      <input type="radio" name="gender" value="男" title="男" checked>
      <input type="radio" name="gender" value="女" title="女" >
    </div>
  </div>
  
  <div class="layui-form-item" pane style="width: 500px;">
    <label class="layui-form-label">头像</label>
    <div class="layui-input-inline">
      <input type="text" id="img" value="${userInfo.img }" name="img" lay-verify="required" placeholder="请输入图片路径" autocomplete="off" class="layui-input">
    </div>
    <button type="button" class="layui-btn" id="imgUpload" style="margin-left: 76px;">
  		<i class="layui-icon">&#xe67c;</i>上传图片
	</button>
  </div>
  
  <div class="layui-form-item" pane style="width: 500px;">
    <label class="layui-form-label">电话</label>
    <div class="layui-input-inline">
      <input type="text" name="phone" value="${userInfo.phone }" required  lay-verify="required|phone" placeholder="请输入电话号" autocomplete="off" class="layui-input">
    </div>
  </div>
  
  <div class="layui-inline" pane>
      <label class="layui-form-label">日期</label>
      <div class="layui-input-inline">
        <input type="text" id="edit_date" style="width: 393px;" value="${userInfo.birthday }" lay-verify="required" name="birthday" class="layui-input" placeholder="yyyy-MM-dd">
      </div>
  </div>
  
  <div class="layui-form-item" pane style="width: 500px; margin-top: 14px;">
  <label class="layui-form-label">操作</label>
    <div class="layui-input-block" style="margin-left: 200px;">
      <button class="layui-btn" lay-submit lay-filter="editBtn">修改</button>
    </div>
  </div>
</form>
	
<script>
//Demo
layui.use(['table','layer','form','upload','laydate'], function(){
	  var table = layui.table;
	  var layer = layui.layer;
	  var form = layui.form;
	  var $ = layui.$;
	  var upload = layui.upload;
	  var laydate = layui.laydate;//edit_date
	  
	  //日期时间选择器
	  laydate.render({ 
	    elem: '#edit_date'
	    ,type: 'datetime'
	  });
	  
	  //自定义添加的验证规则
      form.verify({
          nikename: function(value){
              if(value.length < 5){
                  return '昵称至少得5个字符啊';
              }
          }
          ,pass: [/(.+){5,12}$/, '密码必须5到12位']
          ,repass: function(value){
              if($('#E_pass').val()!=$('#E_repass').val()){
                  return '两次密码不一致';
              }
          }
          ,age: [/^([1-9][0-9]{0,1}|100)$/, '年龄必须为100以内']
      });
	  
	  //旧用户名
	  var oldName = $("#nameVerify").val();
	  //验证用户名是否存在
	  $("#nameVerify").blur(function(){
		  //alert(oldName);
		  var newName = $("#nameVerify").val();
		  if(newName != ""){
			  if(newName == oldName){
				  $("#name_style").html("*");
	 			  $("#name_style").css({"color":""});
	 			  $("#nameVerify").css({"border":""});
			  }else{
				  $.get("<%=basePath %>back/queryAllUserByNameWitchVerify/"+newName,{},function(res){
						if(res){
							$("#name_style").html("已有该名称");
				 			$("#name_style").css({"color":"red"});
				 			$("#nameVerify").css({"border":"1px solid red"});
						}else{
							$("#name_style").html("*");
				 			$("#name_style").css({"color":""});
				 			$("#nameVerify").css({"border":""});
						}
				  });
			  }
		  }else{
			  $("#name_style").html("名称不能为空");
 			  $("#name_style").css({"color":"red"});
 			  $("#nameVerify").css({"border":"1px solid red"});
		  }
		  
	  })
	  
	  
  
	  //监听提交[修改按钮]
	  form.on('submit(editBtn)', function(data){
	      //console.log(data);  //可以得到添加表单中文本框的值
	      //我们 需要发送一个请求，带上我们的参数。
	      var newName = $("#nameVerify").val();
		  if(newName != ""){
			  if(newName != oldName){
				  $.get("<%=basePath %>back/queryAllUserByNameWitchVerify/"+newName,{},function(res){
						if(res){
							layer.msg("已有该用户名称！");
						}else{
							$.post("<%=basePath%>back/editUserBasicInformationById",{
						    	id:data.field.id,
						    	name:data.field.name,
						    	loginPassword:data.field.loginPassword,
						    	gender:data.field.gender,
						    	birthday:data.field.birthday,
						    	img:data.field.img,
						    	phone:data.field.phone,
						    },function(res){
						    	if(res){
						    		layer.close(layer.index);
						    		layer.msg("修改成功");
						    		layer.closeAll('page');
						    		$("#U_form")[0].reset();
						    	}else{
						    		layer.close(layer.index);
						    		layer.msg("修改失败");
						    		layer.closeAll('page');
						    		$("#U_form")[0].reset();
						    	}
						    	
						    },'json');
						}
				  });
			  }else{
				  $.post("<%=basePath%>back/editUserBasicInformationById",{
				    	id:data.field.id,
				    	name:data.field.name,
				    	loginPassword:data.field.loginPassword,
				    	gender:data.field.gender,
				    	birthday:data.field.birthday,
				    	img:data.field.img,
				    	phone:data.field.phone,
				    },function(res){
				    	if(res){
				    		layer.close(layer.index);
				    		layer.msg("修改成功");
				    		window.setTimeout(function(){top.location.reload();},1000);
				    	}else{
				    		layer.close(layer.index);
				    		layer.msg("修改失败");
				    		window.setTimeout(function(){top.location.reload();},1000);
				    	}
				    	
				    },'json');
			  }
		  }else{
			  layer.msg("用户名不能为空！");
		  }
	      
	  });
	  
	  //修改表单中的图片上传
	  var uploadInst = upload.render({
	    elem: '#imgUpload' //绑定元素
	    ,url: '<%=basePath%>upload/img' //上传接口
	    ,done: function(res){
	      //上传完毕回调
	      //console.log(res);  //可以获取到响应过来图片路径
	      //把路径添加到文本框
	      $("#img").val(res.data);
	    }
	    ,error: function(){
	      //请求异常回调
	    }
	  });
  
});
</script>	
	
	
</body>
</html>